<template>
	<view>
		<tn-nav-bar fixed :isBack="true">
			收益提现
		</tn-nav-bar>
 
 	<view class="tn-padding-top-xs" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
 
 <view class="  tn-cool-bg-color-6 tn-margin" style="border-radius: 10px 10px 10px 10px;" >
 		<!-- 更多信息-->
 		<view class="tn-padding-top-sm">
 
 			<view class="tn-flex tn-flex-row-between" @click="tipshow=true">
 				<view class="justify-content-item tn-margin-sm " style="color: #dddddd;">
 					可提现金额（元）
 				
				</view>	
									<view class="justify-content-item tn-margin-sm " style="color: #dddddd;">
										对应{{configInfo.site_moneyname}}收益
										 <text class="tn-icon-help tn-margin-left" ></text>
									</view>	
 			</view>
 
 			<view class="tn-flex tn-flex-row-between tn-flex-col-center  "
 				style="width:100%;border-radius: 15rpx  15rpx  0rpx  0rpx;">
 				<view class="justify-content-item tn-margin-left">
 					<view class="tn-text-bold tn-padding-bottom-xs" style="font-size:60rpx;">							
 				{{body.ti_money}}
 					</view>
 				</view>
 				<view class="justify-content-item tn-margin " style="margin-right:120rpx;">
 					<view class="tn-text-bold tn-padding-bottom-xs" style="font-size:36rpx;">
 					{{body.gift_money}}
 						</view>
 				</view>
 			</view>
 			
 		</view>
 </view>	
 
 
 
 <view class="  tn-bg-gray--light tn-margin tn-padding-bottom" style="border-radius: 10px 10px 10px 10px;" >
 		<!-- 更多信息-->
 	<view class="tn-bg-gray--light "
 		style=" margin-top:8px; border-radius: 10rpx;padding: 20rpx 30rpx;">
 		<input placeholder="收款人姓名" type="text" v-model="ti_name" placeholder-style="color:#343434"
 			style="font-size: 14px;color: #000;"></input>
 	</view>
 	<view class="tn-bg-gray--light "
 		style=" margin-top:8px; border-radius: 10rpx;padding: 20rpx 30rpx;">
 		<input placeholder="银行卡号或支付宝账号" type="text" v-model="ti_kano" placeholder-style="color:#343434"
 			style="font-size: 14px;color: #000;"></input>
 	</view>
		 <view class=" tn-flex tn-flex-row-left tn-margin ">
		 	<view class="tn-padding-xs tn-text-bold">提现金额</view>
		 </view>
		 <view class=" tn-flex tn-flex-row-between tn-margin  ">
		 	<view class="justify-content-item" style="font-size: 46rpx;">￥</view>
		 	<view class="justify-content-item">
				<input auto-height="true"  :adjust-position="true" v-model="ok_money"
					 cursor-spacing="10" placeholder="请输入本次提现金额" type="number"
					placeholder-style="font-size: 14px;" style="height:30px;font-size: 46rpx;"/>
			</view>
		 	<view class="justify-content-item" @click="ok_money=body.ti_money">
			<tn-tag shape="circle"  backgroundColor="tn-main-gradient-aquablue--light">
			全部
			</tn-tag></view>
		 </view>
		 <view class=" tn-flex tn-flex-row-left tn-margin ">
		 	<view class="tn-padding-xs tn-color-gray">最低提现{{body.gift_tixian_zuidi}}元</view>
		 	<view class="tn-padding-xs tn-color-red" v-if="ok_money<body.gift_tixian_zuidi">输入金额低于{{body.gift_tixian_zuidi}}元</view>
		 	<view class="tn-padding-xs tn-color-red" v-if="ok_money>body.ti_money">输入金额超过可提现金额</view>
		 </view>
		 
		 <view class=" tn-flex tn-flex-row-left tn-margin ">
		 	<view class="tn-padding-xs tn-color-gray">提现金额小于{{body.tixian_shouxufei_money}}元</view>
		 	<view class="tn-padding-xs tn-color-red" >收取{{body.tixian_shouxufei}}%</view>
		 
		 </view>
		 
		 
	 <view class="tn-text-center tn-padding-top" >
	 	
		<tn-button :fontSize="28" width="80%" backgroundColor="tn-cool-bg-color-6" v-if="ok_money<=body.ti_money&&ok_money>=body.gift_tixian_zuidi"
			fontColor="#ffffff" shape="round" height="80rpx" @click="pass()">
			申请提现
		</tn-button>
		<tn-button :fontSize="28" width="80%" backgroundColor="tn-main-gradient-purple--light"
			fontColor="#ffffff" shape="round" height="80rpx" v-else>
			申请提现
		</tn-button>
	 </view>
	</view>	
			 
	
	<view class="  tn-bg-gray--light tn-margin tn-padding-bottom" style="border-radius: 10px 10px 10px 10px;" >
				
	 <view class=" tn-flex tn-flex-row-left tn-margin tn-padding-top ">
		<view class="tn-padding-xs ">提现说明</view>
	 </view>
	<view class="  tn-flex-row-left tn-margin-sm tn-color-gray">
		<view	class="tn-padding-xs">1、将提现到你的填写的账号</view>
		<view	class="tn-padding-xs">2、每天提现不得超过5000人民币</view>
		<view	class="tn-padding-xs">3、提现的账户必须为已实名认证用户</view>
		<view	class="tn-padding-xs">4、提现账户的实名认证必须与用户本人实名人认证保持一致</view>
		<view	class="tn-padding-xs">5、提交提现申请后，一般会在24小时内到账，若遇到节假日，时间会延长至72小时</view>
	</view>
	<view class=" tn-flex tn-flex-row-center tn-margin tn-padding-top " @click="navigateToFn({ url: '/mineMixinPages/chat/talkkefu', checkLogin: true })">
		<view class="tn-padding-xs tn-icon-service">联系客服</view>
	</view>		 
</view>		
			<tn-modal width="80%" v-model="shezhishow" backgroundColor="#ffffff" padding="30rpx 20rpx" :radius="25"
				title="设置" :showCloseBtn="false"  :maskCloseable="true" :zoom="true" :custom="true">
			
				<view class="custom-modal-content tn-padding-sm ">
					<view class="tn-text-left tn-color-black" style="font-size: 14px;">
						可提现{{gift_tixian_name}}数量：{{gift_money}} ，兑换人民币比例为{{gift_tixian_bili}}%
					</view>
					
					<view class="tn-bg-gray--light "
						style=" margin-top:8px; border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="收款人姓名" type="text" v-model="ti_name" placeholder-style="color:#343434"
							style="font-size: 14px;color: #000;"></input>
					</view>
					<view class="tn-bg-gray--light "
						style=" margin-top:8px; border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="银行卡号或支付宝账号" type="text" v-model="ti_kano" placeholder-style="color:#343434"
							style="font-size: 14px;color: #000;"></input>
					</view>
					<view class="tn-text-center tn-padding-top" @click="xiugairoom()">
						<tn-button :fontSize="28" padding="20rpx" height="56rpx" fontColor="#080808"
							backgroundColor="rgb(255, 240, 13)">提交申请</tn-button>
					</view>
			
				</view>
			</tn-modal>
			 


   		</view>
   
   <tn-modal width="80%" v-model="tipshow" backgroundColor="#ffffff" padding="30rpx 20rpx" :radius="25"
   	title="设置" :showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="true">
   
   	<view class="custom-modal-content tn-padding-sm ">
   		<view class="  tn-margin-top  ">
   			<view class=" tn-flex tn-flex-row-center " style="margin-top:20rpx;">
   				<view class="tn-padding-xs tn-text-bold tn-text-lg">可提现{{configInfo.site_moneyname}}说明</view>
   			</view>
   			<view class=" tn-flex tn-flex-row-left " style="margin-top:20rpx;">
   				<text
   					class="tn-padding-xs">1、可提现{{configInfo.site_moneyname}}是通过平台获取的{{configInfo.site_moneyname}}
   					收益，例如：直播打赏礼物等。</text>
   			</view>
   			<view class=" tn-flex tn-flex-row-left ">
   				<text class="tn-padding-xs">2、签到、获赠、充值等获得的{{configInfo.site_moneyname}}不可用于提现。</text>
   			</view>
   			<view class=" tn-flex tn-flex-row-left ">
   				</view>
   			<view class=" tn-flex tn-flex-row-left ">
   				<text class="tn-padding-xs">3、提现金额计算规则：{{body.gift_tixian_bili}}{{configInfo.site_moneyname}}=1人民币</text>
   			</view><text class="tn-padding-xs">4、获取的{{configInfo.site_moneyname}}收益中取出平台成本（充值折扣等）{{100-body.gift_bili}}%后，获得{{body.gift_bili}}%</text>
   		
   			<view class=" tn-flex tn-flex-row-left ">
   				<text
   					class="tn-padding-xs">例如:{{configInfo.site_moneyname}}收益100{{configInfo.site_moneyname}},去除平台成本{{100-body.gift_bili}}%后，折合人民币{{(100-(100-body.gift_bili))/body.gift_tixian_bili}}元</text>
   			</view>
   		</view>
   
   
   		<view class="tn-text-center tn-padding-top" @click="tipshow=false">
   			<tn-button :fontSize="28" padding="16rpx 150rpx" backgroundColor="tn-cool-bg-color-6"
   				fontColor="#ffffff" shape="round">
   				知道了
   			</tn-button>
   		</view>
   
   	</view>
   </tn-modal>
   
	</view>
</template>

<script>
	
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		 	mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
		tipshow:false,
		shezhishow:false,
        showTips: false,
        body:[],
		yitixian:0,
		gift_money:0,	
		gift_tixian_bili:0,
		zong:0,	
		zong_money:0,
		content:[],
		ti_kano:'',
		ti_name:'',
		ok_money:0,
		gift_tixian_name:''
			}
		},
    onLoad() {
	   this.info()
    },
    methods: {
    
	async pass(){
		
		let that = this;
		if (this.ok_money==0){
			this.msg('请填写提现金额');
			return
		}	
			if (!this.ti_name){
				this.msg('请填写姓名');
				return
			}	
			if (!this.ti_kano){
				this.msg('请填写卡号或支付宝账号');
				return
			}	
		let result = await that.$request({
			loading: 1,
			method: 'post',
			url: '/chat/gift/money_ti',
			data: {	
				ti_name:this.ti_name,
				ti_kano:this.ti_kano,
				ti_money:this.ok_money,
			}
		});
		if (result.statusCode == 200) {
			if (result.data.code == 200) {			
				this.msg('提现成功，等待审核')	
						this.ti_name=''
						this.ti_kano=''
						this.ok_money=0
				this.info()
			} else {
					uni.showToast({
						icon: 'none',
						title: result.data.msg
					});
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: that.$errorMsg
				});
			}	
	},
	
	
	async info() {
		let that = this;		
		let result = await that.$request({
			loading: 0,
			method: 'post',
			url: '/chat/gift/money',
			data: {}
		});		
		if (result.statusCode == 200) {			
			if (result.data.code == 200) {
			this.body=result.data.data				 
			} else {				
				uni.showToast({
					icon: 'none',
					title: result.data.msg
				});
			}
		}
	},
	
	
	  
	  	
     
    }
	}
</script>

<style lang="scss">

.status-bar {
  height: var(--status-bar-height);
  background-color: #ffdd00;
}
.my-promotion .header {
  background-color: #ffdd00;
  width: 100%;
  height: 350rpx;
}
.bg-color {
  background-color: #ffdd00!important;
  color: #333 !important;
  box-shadow: 0 0 0 20rpx #FFFFFF;
}
.acea-row {
  display: flex;
  flex-wrap: wrap;
}
.acea-row.row-center-wrapper {
  justify-content: center;
  align-items: center;
}
.acea-row.row-between-wrapper {
  justify-content: space-between;
}
.acea-row.row-column {
  flex-direction: column;
}
.my-promotion .header .name {
  font-size: 32rpx;
  color: #000;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.record {
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: -40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.record .iconfont {
  font-size: 25rpx;
  margin-left: 10rpx;
  vertical-align: 2rpx;
}

.my-promotion .header .num {
  text-align: center;
  color: #333;
  // margin-top: 28rpx;
  font-size: 90rpx;
  font-family: 'Guildford Pro';
  min-height: 90rpx;
}

.my-promotion .header .profit {
  padding: 0 20rpx;
  margin-top: -100rpx;
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.5);
}

.my-promotion .header .profit .item {
  min-width: 200rpx;
  text-align: center;
}
.my-promotion .list {
  padding: 0 10px 25px 10px;
  margin-top: 5px;
}
.my-promotion .list .item {
  width: 172px;
  height: 120px;
  border-radius: 10px;
  background-color: #fff;
  margin-top: 10px;
  font-size: 15px;
  color: #666;
}

.my-promotion .header .profit .item .money {
  font-size: 34rpx;
  color: #333;
  margin-top: 5rpx;
}

.my-promotion .bnt {
  font-size: 28rpx;
  color: #fff;
  width: 258rpx;
  height: 68rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 68rpx;
  margin: -32rpx auto 0 auto;
}

.my-promotion .list {
  padding: 0 20rpx 50rpx 20rpx;
  margin-top: 10rpx;
}

.my-promotion .list .item {
  width: 345rpx;
  height: 240rpx;
  border-radius: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
  font-size: 30rpx;
  color: #666;
}
.daxiao{
	font-size: 60rpx;
	color: #ffaa00;
}

.my-promotion .list .item .iconfont {
  font-size: 70rpx;
  background-image: linear-gradient(to right, #fc4d3d 0%, #e93323 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20rpx;
}

	.message {
	  display: flex;
	  flex-direction: row;
	
	  justify-content: space-around;
	  
	  &__left {
	    width: 10%;
	  }
	  &__middle {
	    width: 70%;	  
	  
	  }
	  &__right {
	    width: 30%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	  }
	  
	  &__name {
	    font-size:14px;
	    margin-bottom: 8rpx;
	  }
	  &__content {
	    font-size: 26rpx;
	    color: #838383;
	  }
	  &__tips {
	    &__icon {
	      font-size: 36rpx;
	      color: #AAAAAA;
	    }
	  }
	}
</style>
